import Icon from "@ui/RJMart/icons";
import erweima from "../../../../imgs/erweima.png";
import qqWhite from "../../../../imgs/qq-white.png";
import kefu from "../../../../imgs/kefu.png";
import CommonUtils from "../../common/utils/CommonUtils";

const clientWidth =
    document.documentElement.clientWidth || document.body.clientWidth;

export default class FixeRightNav extends React.Component {
    constructor() {
        super();
        this.defalutTel = "联系客服";
        this.tel = "400-900-578";
        this.state = {
            floors: [1, 2, 3, 4, 5],
            choosed: -1,
            tel: this.defalutTel,
            showDetail: false
        };
    }

    render() {
        const { floors, choosed, tel, showDetail } = this.state;
        const { categoryAndProductList } = this.props;
        let _categoryAndProductList = categoryAndProductList;
        // if(categoryAndProductList&&categoryAndProductList.length>6){
        //     _categoryAndProductList=categoryAndProductList.slice(0,6)
        // }

        return (
            <div className={"fixed-rigth-nav"}>
                <div
                    onClick={() => {
                        CommonUtils.scrollToTop();
                    }}
                    className={"fixed-rigth-nav-top"}
                >
                    <Icon
                        type={"up"}
                        size={"small"}
                        className={"fixed-rigth-nav-top-icon"}
                    />
                    <p className={"fixed-rigth-nav-top-p1"}>TOP</p>
                </div>
                <div className={"fixed-rigth-nav-top-line"} />
                {$state.params.navigationBar != 1 && (
                    <div
                        onMouseLeave={() => {
                            this.setState({
                                choosed: -1
                            });
                        }}
                    >
                        {_categoryAndProductList.map((item, index) => (
                            <div key={index}>
                                <div
                                    onClick={() => {
                                        CommonUtils.scrollToById(
                                            `product-section-box-${index + 1}`
                                        );
                                    }}
                                    onMouseOver={() => {
                                        this.setState({
                                            choosed: index
                                        });
                                    }}
                                    className={
                                        choosed == index
                                            ? "fixed-rigth-nav-floor1"
                                            : "fixed-rigth-nav-floor"
                                    }
                                >
                                    <p>{`${index +
                                        1}F ${item.fistLevelCategoryName ||
                                        item.name}`}</p>
                                </div>
                                <div className={"fixed-rigth-nav-top-line"} />
                            </div>
                        ))}
                    </div>
                )}

                <div className={"fixed-rigth-nav-erweima"}>
                    <img
                        src={erweima}
                        alt=""
                        style={{ height: 72, width: 72 }}
                    />
                    <p className={"fixed-rigth-nav-erweima-p1"}>关注公众号</p>
                    <p className={"fixed-rigth-nav-erweima-p2"}>手机审批验收</p>
                </div>
                <div className={"fixed-rigth-nav-top-line"} />
                {
                    <div
                        onMouseOver={() => {
                            this.setState({
                                showDetail: true
                            });
                        }}
                        onMouseLeave={() => {
                            this.setState({
                                showDetail: false
                            });
                        }}
                        className={"fixed-rigth-nav-contact"}
                    >
                        <div className={"fixed-rigth-nav-contact1"}>
                            <img src={kefu} alt="" />
                            <p>{tel}</p>
                        </div>
                        {showDetail && (
                            <div className={"fixed-rigth-nav-detail"}>
                                <div className={"fixed-rigth-nav-phone"}>
                                    <p className={"fixed-rigth-nav-phone-name"}>
                                        热线电话：
                                    </p>
                                    <p className={"fixed-rigth-nav-phone1"}>
                                        400-900-5786
                                    </p>
                                    <p className={"fixed-rigth-nav-qq"}>
                                        QQ客服：
                                    </p>
                                    <div className={"fixed-rigth-nav-btns"}>
                                        <a
                                            href={
                                                "tencent://message/?uin=2359872304&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes"
                                            }
                                            className={
                                                "fixed-rigth-nav-btn fixed-rigth-nav-btn1"
                                            }
                                        >
                                            <img src={qqWhite} alt="" />
                                            <p>锐竞小D</p>
                                        </a>
                                        <a
                                            href={
                                                "tencent://message/?uin=3520256275&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes"
                                            }
                                            className={
                                                "fixed-rigth-nav-btn fixed-rigth-nav-btn2"
                                            }
                                        >
                                            <img src={qqWhite} alt="" />
                                            <p>锐竞小S</p>
                                        </a>
                                    </div>
                                </div>
                                <div className={"fixed-rigth-nav-detail-tri"} />
                            </div>
                        )}
                    </div>
                }
            </div>
        );
    }
}
